<template>
  <div>
    <div id="app"></div>
  </div>

</template>
<script>

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// 导入水面
import { Water } from "three/examples/jsm/objects/Water2";
//能够快速地搭建three.js的交互ui，
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
    };
  },
  methods: {
    init() {
      let self = this;
      let container = document.getElementById("app");
      //初始化场景
      self.scene = new THREE.Scene();
      //相机
      self.camera = new THREE.PerspectiveCamera(
          75, //视野角度
          window.innerWidth / window.innerHeight,
          0.1,
          3000 //远截面-离模型可以最远距离
      );
      // 设置相机位置
      self.camera.position.set(-50, 50, 130);
      // 更新摄像头宽高比例
      self.camera.aspect = window.innerWidth / window.innerHeight;
      // 更新摄像头投影矩阵
      self.camera.updateProjectionMatrix();
      self.scene.add(self.camera);

      // 初始化渲染器
      self.renderer = new THREE.WebGLRenderer({
        // 设置抗锯齿
        antialias: true,
        //   对数深度缓冲区
        logarithmicDepthBuffer: true,
      });
      self.renderer.outputEncoding = THREE.sRGBEncoding;

      // 设置渲染器宽高
      self.renderer.setSize(window.innerWidth, window.innerHeight);
      self.renderer.setPixelRatio( window.devicePixelRatio );
      self.renderer.toneMapping = THREE.ACESFilmicToneMapping;
      self.renderer.toneMappingExposure = 1;
      self.renderer.outputEncoding = THREE.sRGBEncoding;
      // 监听屏幕的大小改变，修改渲染器的宽高，相机的比例
      window.addEventListener("resize", () => {
        self.camera.aspect = window.innerWidth / window.innerHeight;
        self.camera.updateProjectionMatrix();
        self.renderer.setSize(window.innerWidth, window.innerHeight);
      });
      // 将渲染器添加到页面
      container.appendChild(self.renderer.domElement);

      // 实例化控制器
      self.controls = new OrbitControls( self.camera, self.renderer.domElement );
      // self.controls.enableDamping = true;
      // self.controls.minDistance = 1;
      // self.controls.maxDistance = 10;
      // self.controls.target.set( 0, 0.35, 0 );
      self.controls.update();

      // 创建一个巨大的天空球体
      let texture = new THREE.TextureLoader().load("static/texture/sky.jpg");
      const skyGeometry = new THREE.SphereGeometry(1000, 60, 60);
      const skyMaterial = new THREE.MeshBasicMaterial({
        map: texture,
      });
      skyGeometry.scale(1, 1, -1);
      const sky = new THREE.Mesh(skyGeometry, skyMaterial);
      self.scene.add(sky);

      // 添加平行光
      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(-100, 100, 10);
      self.scene.add(light);

      // 创建水面
      const waterGeometry = new THREE.CircleBufferGeometry(300, 64);
      const water = new Water(waterGeometry, {
            textureWidth: 1024,
            textureHeight: 1024,
            color: 0xeeeeff,
            flowDirection: new THREE.Vector2(1, 1),
            scale: 1,
          }
      );
      water.position.y = -6.5;
      // 水面旋转至水平
      water.rotation.x = -Math.PI / 2;
      self.scene.add(water);

      //模型加载
      // 实例化gltf载入库
      // var chair;
      let gltfLoader = new GLTFLoader();
      // gltfLoader.load("static/model/SheenChair.glb", (gltf) => {
      //     gltf.scene.scale.set(60, 60, 60); //整体放大载入模型
      gltfLoader.load("static/model/kele.gltf", (gltf) => {
        gltf.scene.scale.set(0.2, 0.2, 0.2); //整体放大载入模型
        self.scene.add( gltf.scene);
        // chair = gltf.scene;
        const object = gltf.scene.getObjectByName( 'SheenChair_fabric' );
        const gui = new GUI(); //能够快速地搭建three.js的交互ui，
        gui.add( object.material, 'sheen', 0, 1 );
        gui.open();
      }  );
    },
    animate() {
      requestAnimationFrame(this.animate);
      //设置旋转动画
      // chair.rotation.y += 0.01;
      this.renderer.clear();
      this.renderer.render(this.scene, this.camera);
      this.renderer.clearDepth();
    }
  },
  mounted() {
    this.init();
    this.animate();
  }
};

</script>

<style scoped>
#app {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

</style>

